<script setup>
import { ref } from 'vue'
import { loginUser } from '@/api/user'
import { ElMessage } from 'element-plus'
import router from '../../router'



//关联表单
const loginFormRef = ref(null)
//登陆方法
const submitForm = () => {
    if (!loginFormRef) return
    loginFormRef.value.validate(async (valid, fields) => {
        if (valid) {
            let result = await loginUser(loginForm.value)
            if (result.code == 200) {
                //将用户信息存入到localStorege
                localStorage.setItem('userInfo', JSON.stringify(result.data))
                //提示登录成功信息
                ElMessage.success('登录成功')
                //跳转到主页，路由
                router.push('/')
            } else {
                ElMessage.error('登录失败')
            }
        } else {
            console.log('校验失败!', fields)
        }
    })
}

//定义表单
const loginForm = ref({
    username: '',
    password: ''
})

//校验规则
const loginRules = ref({
    username: [
        { required: true, message: '账号不能为空!', trigger: 'blur' },
        { min: 3, max: 20, message: '账号长度在3-20位之间!', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '密码不能为空!', trigger: 'blur' },
        { min: 5, max: 60, message: '密码长度在5-60位之间!', trigger: 'blur' },
    ]
})
</script>
<template>

    <el-form ref="loginFormRef" style="max-width: 600px" :model="loginForm" :rules="loginRules" label-width="auto">
        <el-form-item label="账号" prop="username">
            <el-input v-model="loginForm.username" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="loginForm.password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm()">
                登录
            </el-button>
        </el-form-item>
    </el-form>
</template>
<style scoped></style>